;(function($){  
    "use strict"
    $.fn.banner = function(data, ops={}){
        // 1. 处理参数
        // 解构赋值
        let {
            btn = true,
            list = true,
            autoPlay = true,
            moveTime =1000,
            delayTime = 3000,
            index = 0,
            currentClass = "active"
        } = ops;
        let prev;
        const that = this;
        init();
        // 2. 根据数据，渲染页面结构
        // console.log(data);
        function init(){
            let str = "";
            $.each(data,(idx,val)=>{
                str += `<img src="${val.src}" alt="${val.alt}" title="${val.title}">`;
            })
            $("<div class='imgbox'>"+str+"</div>").appendTo(that)
            // console.log(that);
        }

        if(btn){
            $("<input type='button' id='left' value='<'>").appendTo($("<div class='btns'></div>").appendTo(this)).parent().append($("<input type='button' id='right' value='>'>")).children("#left").click(leftClick).end().children("#right").click(rightClick);
        }
        function leftClick(){
            if(index === 0){
                index = data.length-1
                prev = 0;
            }else{
                 index--;
                 prev = index+1;
                }
                move(prev,index,-1);
        }
        function rightClick(){
            if(index === data.length-1){
                 index=0;
                 prev = data.length-1;
            }else{
                index++;
                prev = index-1;
            }
            move(prev,index,1)
        }

        if(autoPlay){
            let t = setInterval(()=>{
                rightClick();
            },delayTime)
            this.hover(function(){
                clearInterval(t)
            },function(){

                t = setInterval(()=>{
                    rightClick();
                },delayTime)
            })
        }
        
        if(list){
            let str = "";
            $.each(data, idx =>{
                str += `                <li data-target="#banner" data-slide-to="0" class=""></li>`
            })
            $("<ol class='carousel-indicators'>"+str+"</ol>").appendTo(this).children("li").eq(index).addClass(currentClass).end().click(function(){
                if($(this).index() > index){
                    // console.log("左");
                    move(index, $(this).index(), 1)
                }
                if($(this).index() < index){
                    move(index, $(this).index(), -1)
                }
                index = $(this).index();
            })
        }

        function move(prev,idx,d){
            // 先设置要走的图片的默认位置
            // 开始走
            // 再设置要进来的图片的默认位置
            // 开始进来
            that.children(".imgbox").children().eq(prev).css({
                left:0
            }).stop().animate({
                left:-that.children(".imgbox").children().eq(0).width() * d
            },moveTime).end().eq(idx).css({
                left:that.children(".imgbox").children().eq(0).width() * d
            }).stop().animate({
                left:0
            },moveTime)
            that.children(".carousel-indicators").children("li").eq(idx).addClass(currentClass).siblings().removeClass(currentClass)
        }
    }
})(jQuery);
